/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
  <view>
    <u-image width="100%" height="520" :src="bannerSrc" mode="widthFix"></u-image>
    <view class="goodsCard"  v-for="(goods,index) in goodsList" :key="index" @click="getnav('/pagesC/homeSon/goodsDetails?id='+goods.id)">
      <span class="goodsCardindex">{{index+1}}</span>
      <view class="u-flex">
        <u-image width="240" height="240" style="flex-shrink: 0;margin-right:20upx" border-radius="18" :src="goods.thumb_url" />
        <view class="goodsCardRight">
          <p class="u-line-1 goodsName" >{{goods.goods_name}}</p>
          <u-tag text="新品上市" type="error" shape="circle" plain size="mini" />
          <view class="u-flex u-row-between u-col-center" style="width:100%">
            <view class="priceBox">
              <div class="u-flex" style="align-items: flex-end">
                <span class="priceBox1">¥{{goods.zs_price}}</span>
              
              </div>
              <p class="lowerTips">{{$u.timeFrom(goods.addtime,false)}}天前上新</p>
            </view>
            <view class="buyBtn">
              <span class="buyBtntxt1">去尝鲜</span>
            
            </view>
          
          </view>
        </view>
      </view>
    </view>
    
    <loadMore :loadingType="loadingStatus"></loadMore>
  </view>

</template>

<script>
import uniDrawer from '../../components/uni-drawer.vue';

var  graceLazyload = require("../../graceUI/graceLazyload.js");
let page = 1
let shopType = 'all'
let goods_attr = []
export default {
  components:{
    uniDrawer,
    // uniShrink
  },
  data(){
    return {
      imgStaticUrl: this.StaticUrl,
      isshow: false,
      showingIndex1: 1,
      // orderIndex: 0,
      loadingStatus: 0,
      sortType: '',
      filteList: [],
      currValue: 0,
      filteAl: 0,
      indexid: 0,
      cateId: '',
      goodsList: [],
      rightDrawerVisible:false,
      shop:[{check:true,str:'全部商品',type:'all'},{check:false,str:'自营商品',type:1},{check:false,str:'活动商品',type:2}],
      low_price:'', // 最低价格
      max_price:'',  // 最高价格
      isShow:[],  //需要展示的图片记录
      valueStatus: 0,  // 更新页面状态 防止页面卡死
      tag: 'new',
      bannerSrc:''
    }
  },
  
  onShow(){
  
  },
  onReady(){
  
  },
  onLoad (option) {
    page = 1
    this.tag = option.tag
    if(this.tag == 'new'){
      uni.setNavigationBarTitle({
        title: '新品首发'
      });
    }
    this.$loading()
    
    this.getGoodsList({
      page: page,
      tag: option.tag
    })
    this.getBannerImage(option.id)
    console.log("-> option.id", option.id);
  },
  onPageScroll(e){
    // 懒加载
    graceLazyload.load(e.scrollTop, this);
  },
  watch: {
    rightDrawerVisible(){
    
    }
  },
  methods: {
    getBannerImage(id){
      this.$http.getBannerImage({id}).then(res=>{
        this.bannerSrc = res.data.banner_url
      })
    },
    rightDrawerLoad(){
      page = 1
      this.$loading()
      this.loadingStatus = 0
      this.shop.forEach( (el,index)=>{
        el.check = false
        if(index == 0) {
          el.check = true
        }
      })
      
      this.getGoodsList({
        page: page,
        tag: this.tag
      })
    },
    closeRightDrawer() {
      
      this.rightDrawerVisible = false;
    },
    showRightDrawer() {
      this.rightDrawerVisible = true;
    },
    getGoodsList (params) {  // 获取商品分类接口
      
      this.$http.getTagGoodsList(params).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.goodsList = res.data.goodres
          if(this.goodsList.length == 0) {
            this.isshow = true
          } else {
            this.isshow = false
          }
          
          
        } else {
          this.$toast(res.mess)
        }
      })
    },
    
    
    
  },
  
  onReachBottom () {
    if (this.loadingStatus !== 0) return false
    
    this.loadingStatus = 1
    this.$http.getTagGoodsList({
      page: page + 1,
      tag: this.tag,
      sort: this.showingIndex1 === 3 ? this.sortOrder() : this.sortType,
      low_price:this.low_price,
      max_price:this.max_price,
      goods_attr:goods_attr.join(','),
    }).then(res => {
      console.log(this.tag)
      if (res.status === 200) {
        
        if(res.data.goodres.length == 0) {
          this.loadingStatus = 2
          return false
        }
        graceLazyload.load(500, this);
        this.goodsList = this.goodsList.concat(res.data.goodres)
        this.loadingStatus = 0
        page = page + 1
      } else {
        // this.$toast(res.mess)
      }
    }).catch(() => {
      this.loadingStatus = 0
    })
  },
  
}
</script>

<style scope lang="scss">

.goodsCard{
  margin: 20upx;
  border-radius: 18upx;
  background-color: #fff;
  padding: 12upx;
  position: relative;
  &index{
    position: absolute;
    top: 20upx;
    left: 20upx;
    background-color: rgba(#000,0.3);
    width: 40upx;
    height: 40upx;
    line-height: 40upx;
    display: inline-block;
    z-index:999;
    text-align: center;
    color:#fff;
    border-radius:5upx
  }
  .goodsName{
    font-size: 30upx;
    font-weight: 800;
    color:#333
  }
  &Right{
    width:62%;
    height: 240upx;
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .lowerTips{
      color:#999;
      font-size: 24upx;
    }
  }
  .priceBox{
    align-items: flex-end;
    &1{
      font-size: 42upx;
      color:#FD1B48;
      font-weight: bolder;
    }
    &2{
      color:#999;
      margin-left: 6upx;
    }
  }
  .buyBtn{
    padding:12upx 20upx;
    background-image:linear-gradient(to right,#FD184F,#FE420C);
    color:#fff;
    text-align:center;
    font-size:20upx;
    border-radius: 8upx;
    line-height: 28upx;
    flex-shrink: 0;
    &.remind{
      background-image:linear-gradient(to right, #0abb20, #80f38e);
    }
    &txt1{
      font-size: 30upx;
      font-weight: 800;
    }
    &txt2{
      font-size: 28upx;
      
    }
  }
}
</style>
